<template>
  <dv-border-box-8 style="height: 255px; padding: 5px">
    <dv-decoration-7 style="height: 30px; text-align: center"
      >近6月销售额统计</dv-decoration-7
    >
    <div id="chart3"></div>
  </dv-border-box-8>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      config: {},
    };
  },
  methods: {
    getMonthList(monthList) {
      return monthList.map((v) => v.split("-")[1] + "月");
    },
  },
  mounted() {
    this.$http.get("/bill/monthStat").then((res) => {
      const chart = echarts.init(document.getElementById("chart3"), null, {
        height: 240,
      });
      chart.setOption({
        textStyle: {
          color: "#fff", // 设置全局字体颜色为红色
        },
        tooltip: {},
        xAxis: {
          data: this.getMonthList(res.data.monthList),
        },
        legend: {
          textStyle: {
              color: "#fff", // 设置全局字体颜色为红色
            },
        },
        yAxis: [
          {
            splitLine: {
              show: false,
            },
            name: "销售额",
            axisLabel: {
              formatter: "{value} 元",
            },
          },
          {
            splitLine: {
              show: false,
            },
            // interval:100,
            name: "销售数量",
            axisLabel: {
              formatter: "{value} 个",
            },
          },
        ],
        series: [
          {
            type: "line",
            name: "销售额",
            data: res.data.customList,
            smooth: true,
          },
          {
            type: "line",
            name: "销售数量",
            data: res.data.quantityList,
            yAxisIndex: 1,
            smooth: true,
          },
        ],
      });
      window.addEventListener("resize", () => {
        chart.resize();
      });
    });
  },
};
</script>

<style>
</style>
